<template>
  <div class="main">
    <NavBar title="提交报名" left-text="返回" left-arrow @click-left="onClickLeft" />
    <CellGroup>
      <Field label="姓 名" required v-model="user" @input="userClick" placeholder="请输入姓名" />
      <Field label="手机号" required v-model="phone" @input="phoneClick" placeholder="请输入电话" />
    </CellGroup>
    <!--<div class="headimg">-->
      <!--<div>上传logo</div>-->
      <!--<div>-->
        <!--<Uploader v-model="files" :max-count="3" :after-read="booksl"/>-->
      <!--</div>-->
    <!--</div>-->
    <!--<Field-->
      <!--v-model="logom"-->
      <!--label="logo理念"-->
      <!--type="textarea"-->
      <!--placeholder="请输入作品设计理念"-->
      <!--rows="4"-->
      <!--autosize-->
    <!--/>-->

    <!--<div class="headimg">-->
      <!--<div>上传吉祥物</div>-->
      <!--<div>-->
        <!--<Uploader v-model="baobiao" :max-count="3" :after-read="baobiao1"/>-->
      <!--</div>-->
    <!--</div>-->

    <!--<Field-->
      <!--v-model="message"-->
      <!--label="吉祥物理念"-->
      <!--type="textarea"-->
      <!--placeholder="请输入作品设计理念"-->
      <!--rows="4"-->
      <!--autosize-->
    <!--/>-->
    <Button class="btn" @click="subBtn">立即提交</Button>
  </div>
</template>

<script>
import {
  Toast, Field, CellGroup,
  // Uploader,
  Button, NavBar,
} from 'vant';
// import lrz from 'lrz';
import wxapi from '../../api/wxapi';

export default {
  data() {
    return {
      checked: true,
      user: '',
      phone: '',
      message: '',
      sex: '男',
      images: '',
      career: '',
      zhicheng: '',
      huji: '',
      danwei: '',
      dateTime: '',
      baobiao2: [],
      zhengzhi: '',
      logom: '',
      baseUrl: 'http://zfwx.mychebang.com/api/v1.index',
      bookS: [],
      baobiao: [],
      files: [],
      gongzuozhao: [],
      zhengjianzhao_1: '',
      gongzuozhao_1: '',
      baobiao_1: '',
      zhengjianzhao: [],
      size: 750,
      // baseUrl: '/api',
      shareLogo: 'http://zfwx.mychebang.com/static/vote/images/glg.png',
      shareTitle: '浪漫相约•情定沂蒙',
      shareDesc: '“浪漫相约•情定沂蒙”单身职工相约“七夕”活动来了',

    };
  },
  name: 'form',
  components: {
    Field,
    CellGroup,
    // Uploader,
    Button,
    NavBar,
  },
  methods: {
    // 分享
    wxRegCallback() {
      // 用于微信JS-SDK回调
      this.wxShareTimeline();
      this.wxShareAppMessage();
    },
    wxShareTimeline() {
      // 微信自定义分享到朋友圈
      const option = {
        title: this.shareTitle, // 分享标题, 请自行替换
        link: window.location.href.split('#')[0], // 分享链接，根据自身项目决定是否需要split
        imgUrl: this.shareLogo, // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          Toast('分享成功');
        },
        error: () => {
          Toast('已取消分享');
        },
      };
      // 将配置注入通用方法
      wxapi.ShareTimeline(option);
    },
    wxShareAppMessage() {
      // 微信自定义分享给朋友
      const option = {
        title: '浪漫相约•情定沂蒙', // 分享标题, 请自行替换
        desc: this.shareTitle, // 分享描述, 请自行替换
        link: window.location.href.split('#')[0], // 分享链接，根据自身项目决定是否需要split
        imgUrl: this.shareLogo, // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          Toast('分享成功');
        },
        error: () => {
          Toast('已取消分享');
        },
      };
      // 将配置注入通用方法
      wxapi.ShareAppMessage(option);
    },

    onClickLeft() {
      this.$router.back(-1);
    },
    userClick(e) {
      this.user = e;
    },

    phoneClick(e) {
      this.phone = e;
    },


    // booksl() {
    //   const book = [];
    //   const that = this;
    //   for (let i = 0, len = this.files.length; i < len; i += 1) {
    //     lrz(that.files[i].content, { width: that.size, fieldName: 'file' }).then((rst) =>
    //     { book.push(rst.base64); })
    //       .catch((err) => {
    //         console.log(err);
    //         Toast('图像上传失败,图片大小2M以内');
    //         return false;
    //       });
    //   }
    //   this.bookS = book;
    // },
    // baobiao1() {
    //   const baobiao = [];
    //   const that = this;
    //   for (let i = 0, len = this.baobiao.length; i < len; i += 1) {
    //     lrz(that.baobiao[i].content, { width: that.size, fieldName: 'file' }).then((rst) =>
    //     { baobiao.push(rst.base64); })
    //       .catch((err) => {
    //         console.log(err);
    //         Toast('图像上传失败,图片大小2M以内');
    //         return false;
    //       });
    //   }
    //   this.baobiao2 = baobiao;
    // },

    // 提交表单
    // eslint-disable-next-line consistent-return
    subBtn() {
      if (!this.user) {
        Toast('姓名不能为空');
        return false;
      }
      if (!this.phone || this.phone.length !== 11) {
        Toast('手机号错误');
        return false;
      }
      // if (!this.message) {
      //   Toast('设计理念不能为空');
      //   return false;
      // }
      // if (!this.logom) {
      //   Toast('设计理念不能为空');
      //   return false;
      // }
      // if (!this.files.length > 0) {
      //   Toast('请上传图片');
      //   return false;
      // }
      // if (!this.baobiao.length > 0) {
      //   Toast('请上传图片');
      //   return false;
      // }
      const params = {
        phone: this.phone,
        user: this.user,
      };
      this.$post(`${this.baseUrl}/submitObj`, params)
        .then((data) => {
          Toast(data.msg);
        })
        .catch(() => {
          Toast('网络异常，稍后再试');
        });
    },
  },
};
</script>

<style scoped lang="scss">
  .main{
    background: #ffffff;
  }
.headimg {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  & > div:first-child {
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    width: 76px;
    margin-top: 20px;
    margin-left: 14px;
  }
}
.btn {
  background: -webkit-linear-gradient(left, rgba(255, 148, 0, 1) 0%, rgba(255, 51, 84, 1) 100%);
  width: 80vw;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 5;
  margin-left: 10vw;
  margin-top: 40px;
}
</style>
